<template>
<div class="login_container">
	<el-row>
		<el-col :span="12" :xs="0"></el-col>
		<el-col :span="12" :xs="24">
			<!-- 表单校验 
			1. form绑定 :model 属性 -->
			<el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms">
				<h1>Hello</h1>
				<h2>欢迎来到硅谷甄选</h2>
				<el-form-item prop="username">
					<el-input :prefix-icon="User" type="text" v-model="loginForm.username"/>
				</el-form-item>
				<el-form-item prop="password">
					<el-input :prefix-icon="Lock" type="password" v-model="loginForm.password" show-password/>
				</el-form-item>
				<el-form-item>
					<el-button :loading="isLoading" class="login_btn" @click="login">登录</el-button>
				</el-form-item>
	    </el-form>
		</el-col>
	</el-row>
</div>
</template>
<script setup lang="ts">
import axios from 'axios'
// 引入组件
import {User,Lock} from '@element-plus/icons-vue'
// 收集表单数据
import { reactive ,ref} from 'vue'
// 
import { useRouter } from 'vue-router'
// 获取路由
let $router = useRouter()
import useUserStore from '@/store/modules/userStore.ts'
// 获取当前时间
import { getTime } from "@/utils/time.ts"
// 登录成功/失败提示信息
import { ElNotification } from 'element-plus';
import { tr } from 'element-plus/es/locale/index.mjs';
// 控制 loading效果的变量
let isLoading = ref(false)
// 需要携带的信息
let loginForm = reactive({username:'admin',password:'111111'})
// 小仓库
let useSotre = useUserStore();
// 获取表单元素
let loginForms=ref()
// 表单校验需要的配置对象
// const rules = {
// 	username: [
// 		{
// 			type: 'string',
// 			required: true,
// 			message: '请输入正确的用户名',
// 			trigger: 'change'
// 		},
// 		{
// 			required: true,
// 			max: 6,
// 			message: '用户名长度不超过6',
// 			trigger:'change'
// 		}
// 	],
// 	password: [
// 		{
// 			type: 'string',
// 			required: true,
// 			message: '请输入正确的密码',
// 			trigger: 'change'
// 		},
// 		{
// 			required: true,
// 			max: 15,
// 			min: 6,
// 			message: '密码长度最小6位且不超过15位',
// 			trigger:'change'
// 		}
// 	]
// }
// 自定义校验规则函数
const validatorUserName = (rule:any,value:any,callBack:any) => {
	/**
	 * rule 是校验规则
	 * value 是表单元素的文本值
	 * callBack 是一个回调函数
	 * 如果符合规则 callback放行
	 * 不符合 callBack 返回错误提示信息
	 */
	if (value.length >= 5) {
		callBack()
	} else {
		callBack(new Error('账号长度至少为五位'))
	}
}
const validatorPassWord = (rule: any, value: any, callBack: any) => {
	if (value.length >= 6) {
		callBack()
	} else {
		callBack( new Error('密码长度至少为6位'))
	}
}
// 自定义校验规则
const rules = {
	username: [
		{
			trigger: 'change',
			validator:validatorUserName
		}
	],
	password: [
		{
			trigger:'change',
			validator:validatorPassWord,
		}
	]
}

// 登录按钮
const login = async () => {
	// 全部表单校验通过
	// 点击登录按钮，登录加载效果开始
	isLoading.value = true
	try {
		await useSotre.userLogin(loginForm)
		$router.push('/')
		// 登录成功 加载效果停止
		isLoading.value = false
		ElNotification({
			type: 'success',
			message: '欢迎回来',
			// 获取当前时间
			title:`Hi,${getTime()}好！` //标题
		})
	} catch (error) {
		// 登录失败 加载效果停止
		isLoading.value = false
		ElNotification({
			type: 'error',
			message:error.message
		})
	}
}

</script>
<style scoped lang="scss">
.login_container{
	width: 100%;
	height: 100vh;
	background: url('@/assets/images/background.jpg') no-repeat;
	background-size: cover;

	.login_form{
		position: relative;
		width: 80%;
		top:30vh;
		background:url('@/assets/images/login_form.png') no-repeat;
		background-size: cover;
		padding: 40px;

	
		h1{
			color: #fff;
			font-size: 40px;

		}
		h2{
			color: #fff;
			font-size: 20px;
			font-weight: 100;
			margin: 20px 0 ;
		}
		.login_btn{
			width: 100%;
			color: #fff;
			border: #49dfff;
			background: #49dfff;
		}
	}
}

</style>